import React, {useState} from 'react';
import {Column} from '@ant-design/charts';
import {DatePicker, Space, Select, Button, Breadcrumb} from 'antd';

const {Option} = Select;

const {RangePicker} = DatePicker;

function EventChat(props) {
    const data = [
        {
            name: '缺料',
            line: '产线1',
            eventNum: 12,
        },
        {
            name: '呼叫主管',
            line: '产线1',
            eventNum: 28,
        },
        {
            name: '设备异常',
            line: '产线1',
            eventNum: 39,
        },
        {
            name: '品质异常',
            line: '产线1',
            eventNum: 81,
        },
        {
            name: '缺料',
            line: '产线2',
            eventNum: 47,
        },
        {
            name: '呼叫主管',
            line: '产线2',
            eventNum: 20,
        },
        {
            name: '品质异常',
            line: '产线2',
            eventNum: 24,
        },
        {
            name: '缺料',
            line: '产线3',
            eventNum: 77,
        },
        {
            name: '呼叫主管',
            line: '产线3',
            eventNum: 10,
        },
        {
            name: '品质异常',
            line: '产线3',
            eventNum: 64,
        },
    ];
    const config = {
        data: data,
        isGroup: true,
        xField: 'line',
        yField: 'eventNum',
        seriesField: 'name',
        label: {
            position: 'middle',
            layout: [
                {type: 'interval-adjust-position'},
                {type: 'interval-hide-overlap'},
                {type: 'adjust-color'},
            ],
        },
    };
    // eslint-disable-next-line no-unused-vars
    let [type, setType] = useState('');
    // eslint-disable-next-line no-unused-vars
    let [time, setTime] = useState('');

    function typeChange(value) {//修改查询范围
        console.log(`selected ${value}`);
        setType(value)
    }

    function timeChange(value) {//修改查询时间
        console.log(`selected ${value}`);
        setTime(value);
    }

    function find() {//查询
        console.log("查" + type + "  时间" + time)
    }

    return (
        <div className="eventChat">
            <Breadcrumb>
                <Breadcrumb.Item>报表查询</Breadcrumb.Item>
                <Breadcrumb.Item>车间-产线异常报表</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{padding: 24, minHeight: 360}}>
                <Select defaultValue="产线" style={{width: 85}} onChange={typeChange}>
                    <Option value="产线">产线</Option>
                    <Option value="车间">车间</Option>
                    <Option value="按钮盒">按钮盒</Option>
                </Select>
                <Space direction="vertical" size={12}>
                    <RangePicker showTime onChange={timeChange}/>
                </Space>
                <Button type="primary" onClick={find}>查询</Button>
                <Column {...config} />
            </div>
        </div>
    );
}

export default EventChat;